<template>
	<el-row class="logBox">
		<!-- <el-col :span="6">
			<div class="leftBox">
				<div class="leftBoxTitle">
					<div style="font-size: 20px;line-height: 50px;">数据库节点</div>
				</div>
				<div class="leftBoxCon">
					<div :class="[chooseId == item.id?'nodeBox':'isNodeBox']" v-for="(item,index) in allNode"
							@click="choose(item.id)">

					</div>
				</div>
			</div>
		</el-col> -->
		<!-- <el-dialog title="选择网络设备" :visible.sync="dialogVisible" width="30%">
			<div class="selectBox1">
				<div>选择网络设备：</div>
				<el-select v-model="value" filterable placeholder="请选择" @change="selectNode">
					<el-option v-for="item in serverList" :key="item.HID" :label="item.label" :value="item.HID">
					</el-option>
				</el-select>
			</div>
		</el-dialog> -->
		<el-col :span="23">
			<div class="selectBox">
				<div>选择网络设备：</div>
				<el-select v-model="value" filterable placeholder="请选择" @change="selectNode">
					<el-option v-for="item in serverList" :key="item.HID" :label="item.label" :value="item.HID">
					</el-option>
				</el-select>
			</div>
			<div class="rightBox" v-loading="loading">
				<div v-for="item in boxCon" class="conBox">
					{{item}}
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import bus from 'common/bus.js';
	import {
		postJavaServerData,
		submitAdmin
	} from "@/api";
	import {
		getData
	} from '../../../utils/IndexedDB';
	import {
		Log
	} from '@icon-park/vue';
	export default {
		data() {
			return {
				tableData: [],
				options: [],
				loading: false,
				dialogVisible:true,
				value: '',
				chooseId: 1,
				nodeList: [],
				chooseIP: '',
				boxCon: [],
				serverList: [],
				allData: [],
				postData: {
					opera: "GetHostMonitor",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						OS_TYPE: "Network"
					},
				},
				total: 0,
				form: {},
			}
		},
		created() {
			// this.getData()
			this.getNode()
		},
		methods: {
			async getData() {
				this.loading = true
				let res = await postJavaServerData("/Sp/networkloginlog", this.form)
				// const key = Object.keys(res)
				// this.total = parseInt(key[0])
				// let array = Object.keys(res).map(key => res[key])
				// console.log(array[0])
				// this.tableData = array[0]
				// this.tableData.forEach((item,index)=>{
				// 	this.tableData[index].ip = this.chooseIP
				// })

				this.loading = false
				this.boxCon = res
				console.log(666, res)


			},
			choose(id) {
				this.chooseId = id
			},

			async getNode() {
				let res = await submitAdmin({
					postData: JSON.stringify(this.postData),
				})
				this.serverList = res.data
				this.form.ip = res.data[0].HID
				this.value = res.data[0].IP + '/' + res.data[0].OS_TYPE
				console.log(123,this.serverList)
				this.serverList.forEach((item, index) => {
					let a = item.IP + '/' + item.OS_TYPE
					this.serverList[index].label = a
				})
				console.log('我的', this.serverList)
				// let arr = res.data
				// this.options = arr
				// const newArr = arr.map((item, index) => {
				// 	let a = item.IP + '/' + item.SYSTEMNAME
				// 	return {
				// 		...item,
				// 		label:a
				// 	}
				// })
				// this.options = newArr
				// console.log('现在',this.options)
				this.getData()
				
			},
			selectNode() {
				this.dialogVisible = false
				console.log(this.value)
				this.serverList.map((item, index) => {
					if (this.value == item.HID) {
						this.form.ip = item.HID
						this.chooseIP = item.IP
						// this.form = {...this.form,b}
						console.log(this.form)
					}
				})
				this.getData()
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.form.pageNum = val
				this.getData()
			},
			headClass() { //表头居中显示
				return "text-align:center"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center"
			}
		},
	}
</script>

<style scoped>
	.logBox {
		width: 100%;
		height: 840px;
		background-color: white;
		border-radius: 5px;
		border: 1px solid #ddd;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.conBox {
		width: 100%;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 20px;
	}

	.leftBoxTitle {
		width: 100%;
		height: 50px;
		font-size: 20px;
		border-bottom: solid 1px #ddd;
	}

	.selectBox {
		width: 350px;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	.selectBox1 {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.rightBox {
		width: 100%;
		height: 750px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		padding: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow-y: auto;
	}

	.leftBox {
		width: 100%;
		height: 800px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		padding: 10px;
	}

	.fenyeBox {
		margin: 10px auto;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
</style>
